<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet"  type="text/css" href="colorpicker/css/colorpicker.css" />
    
    
	
</head>
<body style="background-color:#f3f1ec">
	
	<div class="container">
		
		<div  style="background-color:#fff;height:670px;border:1px solid #ccc;border-radius:2px;margin-left:180px;margin-top:50px;width:600px;">
			<div class="wall" style="border-bottom:1px solid #ccc;">
				<div style="background-color:#f0f5f8;height:60px;padding-top:3px">
					<h3 style="padding-top:0px;padding-left:15px">修改类别</h3>
				</div>
				
			</div>
			<div style="margin-top:30px;margin-left:10px;width:570px;">
				<div style="margin-left:15px;font-size:14px;">你可以添加或修改类别，但是当修改类别后，会影响到你登录账户的所有交易的类别</div>
				<div class="well" style="height:50px;padding-top:10px;margin-top:20px;width:500px;margin-left:15px;">
					<form action="addCategorys.action" method="post" id="myform">
					  
					  <label>添加一个类别</label>
					  <input type="text" name="type" >
					  <input type="hidden" name="about" value="交易">
					  <button type="button" class="btn" style="margin-bottom:10px;" id="addbtn">添加</button>
					</form>
				</div>
				<div>
					<table class="table">
						<c:forEach items="${categoryList }" var="category">
							<tr>
								<td >
									<input type="text" maxlength="6" size="6" class="color1" value="${category.color }" /><span>${category.type }</span>
									<input type="hidden" value="${category.id }">
								</td>
								<td>
									<a href="javascript:;" class="edit">修改类别</a>
									<a href="#" class="cancel" style="display:none;">取消</a>
									<a href="delCategorys.action?id=${category.id }" ><img src="img/delete.png" title="删除" alt="" /></a>
								</td>
							</tr>
						</c:forEach>
					</table>
						
							
				
					<div><a href="javascript:window.history.go(-1)">返回</a></div>		
					
					
				</div>
				  
				


  
        
        

  




            </div>

        </div>
		
	</div>
			
			
		
			
			
			
			
			
			
			
			
			
			
			
			
	
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="colorpicker/js/colorpicker.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.color1').ColorPicker({
				
				onSubmit: function(hsb, hex, rgb, el) {
					$(el).val(hex);
					$(el).ColorPickerHide();
					
				},
				onBeforeShow: function () {
					$(this).ColorPickerSetColor(this.value);
				}
				
			})
					.bind('keyup', function(){
			$(this).ColorPickerSetColor(this.value);
		});
			var value;
			$(".edit").live("click",function(){
				var name = $(this).html();
				
				if(name == "修改类别"){
					value = $(this).parent().prev().find("span").html();
					$(this).parent().prev().find("span").html("");
					$(this).parent().prev().find("span").append("<input type='text' style='width:80px;'class='editafter'/>");
					$(this).parent().prev().find("span input").val(value);
					$(this).html("保存");
					$(this).next().show();
					$(this).next().next().hide();
				}else if(name == "保存"){
					var t = $(this).parent().prev().find("span input").val();
					
					var color = $(this).parent().prev().find("input").val();
					var id = $(this).parent().prev().find("input[type='hidden']").val();
					
					$(this).parent().prev().find("span").html("");
					$(this).parent().prev().find("span").html(t);
					$(this).html("修改类别");
					$(this).next().hide();
					$(this).next().next().show();
					
					$.get("updateCategorys.action",{type:t,color:color,id:id}); 
				}
			});
				
				
			
			$(".cancel").click(function(){
				$(this).prev().html("修改类别");
				$(this).prev().prev().html("");
				$(this).next().show();
				$(this).prev().parent().prev().find("span").html(value);
				$(this).html("");
			});
			$("#addbtn").click(function(){
				$("#myform").submit();
			});
		});
	</script>
	
</body>
</html> 